<template>
  <a-layout class="layout">
    <a-layout-content>
      <div class="content-container">
        <a-typography-title :level="2" class="text-center">
          商品列表
        </a-typography-title>

        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="12" :md="8" :lg="6" v-for="product in currentProducts" :key="product.productId">
            <a-card hoverable class="product-card">
              <template #cover>
                <img :alt="product.name" :src="product.imageUrl" class="image-good"/>
              </template>
              <a-card-meta :title="product.name">
                <template #description>
                  <div>
                    <p>{{ product.description }}</p>
                    <p class="price">价格: ¥{{ product.price.toFixed(2) }}</p>
                  </div>
                </template>
              </a-card-meta>
              <div class="button-group">
                <a-button
                    :type="cartStore.isProductInCart(product.productId) ? 'default' : 'primary'"
                    @click="toggleCart(product)"
                >
                  <shopping-cart-outlined/>
                  {{ cartStore.isProductInCart(product.productId) ? '从购物车移除' : '加入购物车' }}
                </a-button>
                <a-button @click="toggleFavorite(product)" :class="{ 'favorite': product.isFavorite }">
                  <heart-outlined v-if="!product.isFavorite"/>
                  <heart-filled v-else/>
                  {{ product.isFavorite ? '已收藏' : '收藏' }}
                </a-button>
              </div>
            </a-card>
          </a-col>
        </a-row>

        <a-row justify="center" class="pagination-row">
          <a-col>
            <a-pagination
                v-model:current="currentPage"
                :total="products.length"
                :pageSize="pageSize"
                @change="handlePageChange"
            />
          </a-col>
        </a-row>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue';
import {message} from 'ant-design-vue';
import {ShoppingCartOutlined, HeartOutlined, HeartFilled} from '@ant-design/icons-vue';
import {useCartStore, useProductStore} from '@/stores/index.js';

const cartStore = useCartStore();
const productStore = useProductStore();

const pageSize = 12;
const currentPage = ref(1);

const products = computed(() => productStore.allProducts);

const currentProducts = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize;
  return products.value.slice(startIndex, startIndex + pageSize);
});

const toggleCart = async (product) => {
  const result = await cartStore.toggleProductInCart(product);
  if (result) {
    if (cartStore.isProductInCart(product.productId)) {
      message.success('已添加到购物车');
    } else {
      message.success('已从购物车移除');
    }
  }
};

const toggleFavorite = (product) => {
  product.isFavorite = !product.isFavorite;
  message.success(product.isFavorite ? '已添加到收藏' : '已取消收藏');
};

const handlePageChange = (page) => {
  currentPage.value = page;
};

onMounted(() => {
  productStore.fetchAllProducts();
  cartStore.fetchCartItems();
});
</script>

<style scoped>
.layout {
  min-height: 100vh;
  background-color: #f0f2f5;
}

.content-container {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.image-good {
  height: 190px;
}

.text-center {
  text-align: center;
  margin-bottom: 24px;
}

.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-card :deep(.ant-card-body) {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.product-card :deep(.ant-card-meta-description) {
  flex-grow: 1;
}

.price {
  font-weight: bold;
  color: #ff4d4f;
  margin-top: 8px;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.button-group .ant-btn {
  flex: 1;
  margin: 0 4px;
}

.favorite {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.pagination-row {
  margin-top: 24px;
}
</style>